<template>
    <div>
                        <!-- 滚动监听事件 -->
      <div id="content"  @scroll='scroll'>
           <!-- 默认不显示 -->
        <cols-header class="border fixed" v-show="show" />
                        <!-- 绑定要轮播的图片列表   autoplay表示自动轮播  -->
        <wgy-swiper :banners="banners" autoplay></wgy-swiper>
        <div id="bargain" @click="goArgainList">
                <!-- 全民砍价 -->
            <wgybargain ></wgybargain>
            <!-- li -->
            <wgyoneli :list='list'></wgyoneli>
        </div>
        <!-- 精選專題 -->
       <div class="special" @click="goSift">
            <wgySpecial :article='article'></wgySpecial>
       </div>
        <!-- 人氣推薦 -->
        <wgyRecommend></wgyRecommend>

      </div>
        
        <!-- 底部tab切换 -->
        <wgy-tab />
        <!-- <img v-show="flag" src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=loading%E9%87%8C%E6%94%BE%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=3724257962,3738888480&os=3217671069,3498324448&simid=0,0&pn=62&rn=1&di=83270&ln=1501&fr=&fmq=1611066526029_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&hs=2&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Flc-gold-cdn.xitu.io%252F25daeb12ac465d77f7b9.gif%253FimageView2%252F0%252Fw%252F1280%252Fh%252F960%252Fignore-error%252F1%26refer%3Dhttp%253A%252F%252Flc-gold-cdn.xitu.io%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1613658529%26t%3Da9869eb2c2f64a8705e69e4753f16a73&rpstart=0&rpnum=0&adpicid=0&force=undefined" alt=""> -->
    </div>
</template>

<script>
import wgyTab from '@/components/wgy-Tab/wgy-Tab'

import colsHeader from '@/components/home/colsHeader/colsHeader'

import { getBanners,getGoodsList,getArticle } from '../../utils/api/Home'
import wgySwiper from '@/components/wgy-Swiper/wgy-Swiper'
import wgybargain from '@/components/wgy-Bargain/wgy-Bargain'
import wgyoneli from '@/components/wgy-oneLi/wgy-oneLi'
import wgySpecial from '@/components//wgy-special/wgy-special'
import wgyRecommend from '@/components/wgy-recommend/wgy-recommend'
export default {
    name: 'index',
    data() {
        return {
            // 滚动距离大于200
            show:false,
            // 轮播图
            banners:[],
            // 砍价的那一个
            list:[],
            // 专题
            article:[],
        };
    },
    created() {
        this.$loading.show('拼命加载中...')
        // 获取轮播图图片
        getBanners().then(res => {
            this.banners = res.data
        }),
        // 获取全民砍价第一个
        getGoodsList().then(res => {
            this.list.push(res.data[9])
        }),
        // 获取精选专题
        getArticle().then(res => {
            // console.log(res.data);
            this.article = res.data
            this.$loading.hide()
            
        })
        
    },
    methods: {
        // 滚动事件
        scroll(e){
            console.log(e.target.scrollTop);
            this.show = e.target.scrollTop > 200 ? true : false
        },

        // 跳转到砍价列表页
        goArgainList() {
            this.$router.push('/argainList')
        },
        // 由home页面跳转到精选列表页
        goSift() {
            console.log(2);
            
            this.$router.push('/sift')
        },
    },
    //组件挂载
    components: {
        wgySwiper,
        wgybargain,
        wgyoneli,
        wgySpecial,
        wgyRecommend,
        wgyTab,
        colsHeader,
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
    #content{
        width: 100%;
        height: 617px;
        overflow: hidden;
        overflow-y: auto;

    }
#bargain{
    background-color: #fff;
}
.special{
    margin-bottom: .1rem;
}
</style>
